<template>
  <view class="container">
    <Card class="wish-card">
      <view class="wish-header">
        <text class="wish-title">{{ wish.title }}</text>
        <view class="wish-status" :class="wish.statusClass">
          {{ wish.status }}
        </view>
      </view>
      
      <view class="wish-info">
        <view class="info-item">
          <text class="label">关联学生：</text>
          <text class="value">{{ wish.student }}</text>
        </view>
        
        <view class="info-item">
          <text class="label">创建时间：</text>
          <text class="value">{{ wish.createTime }}</text>
        </view>
        
        <view class="info-item">
          <text class="label">期望完成：</text>
          <text class="value">{{ wish.targetDate }}</text>
        </view>
      </view>
    </Card>
    
    <Card class="description-card">
      <view class="card-header">
        <text class="card-title">心愿描述</text>
      </view>
      <text class="description">{{ wish.description }}</text>
    </Card>
    
    <Card class="conditions-card">
      <view class="card-header">
        <text class="card-title">完成条件</text>
      </view>
      <text class="conditions">{{ wish.conditions }}</text>
    </Card>
    
    <Card class="progress-card">
      <view class="card-header">
        <text class="card-title">完成进度</text>
      </view>
      
      <view class="progress-content">
        <view class="progress-bar">
          <view class="progress-fill" :style="{ width: wish.progress + '%' }"></view>
        </view>
        <text class="progress-text">{{ wish.progress }}%</text>
      </view>
    </Card>
    
    <view class="action-buttons">
      <Button class="action-btn" type="primary" text="编辑心愿" @click="goToEdit" />
      <Button class="action-btn" type="error" text="删除心愿" @click="handleDelete" />
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      wish: {
        id: '1',
        title: '想去游乐场',
        student: '张小明',
        description: '如果我能连续一个月完成所有学习计划，就带我去游乐场玩',
        conditions: '连续30天完成每日学习计划，包括数学练习、英语单词背诵和语文阅读',
        createTime: '2025.08.25',
        targetDate: '2025.09.25',
        status: '进行中',
        statusClass: 'status-progress',
        progress: 60
      }
    };
  },
  
  methods: {
    goToEdit() {
      uni.showToast({
        title: '编辑功能待实现',
        icon: 'none'
      });
    },
    
    handleDelete() {
      uni.showModal({
        title: '确认删除',
        content: '确定要删除这个心愿吗？此操作不可恢复。',
        success: (res) => {
          if (res.confirm) {
            uni.showToast({
              title: '删除成功',
              icon: 'success'
            });
            
            // 返回许愿池页面
            setTimeout(() => {
              uni.navigateBack();
            }, 1000);
          }
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  padding: $spacing-base;
  background-color: $background-color;
  min-height: 100vh;
}

.wish-card {
  margin-bottom: $spacing-base;
}

.wish-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-bottom: $spacing-lg;
}

.wish-title {
  font-size: $font-size-lg;
  font-weight: bold;
  color: $text-primary;
  flex: 1;
}

.wish-status {
  font-size: $font-size-sm;
  padding: $spacing-xs $spacing-sm;
  border-radius: $border-radius-sm;
}

.status-progress {
  background-color: rgba($primary-color, 0.1);
  color: $primary-color;
}

.wish-info {
  font-size: $font-size-sm;
}

.info-item {
  display: flex;
  flex-direction: row;
  margin-bottom: $spacing-sm;
  
  &:last-child {
    margin-bottom: 0;
  }
}

.label {
  color: $text-secondary;
  width: 160rpx;
}

.value {
  flex: 1;
  color: $text-primary;
}

.description-card, .conditions-card, .progress-card {
  margin-bottom: $spacing-base;
}

.card-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-bottom: $spacing-base;
}

.card-title {
  font-size: $font-size-base;
  font-weight: bold;
  color: $text-primary;
}

.description, .conditions {
  font-size: $font-size-base;
  color: $text-primary;
  line-height: 1.6;
}

.progress-content {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.progress-bar {
  flex: 1;
  height: 20rpx;
  background-color: $background-color;
  border-radius: 10rpx;
  overflow: hidden;
  margin-right: $spacing-base;
}

.progress-fill {
  height: 100%;
  background-color: $primary-color;
  border-radius: 10rpx;
}

.progress-text {
  font-size: $font-size-base;
  color: $primary-color;
  font-weight: bold;
  width: 80rpx;
}

.action-buttons {
  position: fixed;
  bottom: 40rpx;
  left: $spacing-base;
  right: $spacing-base;
  display: flex;
  flex-direction: row;
}

.action-btn {
  flex: 1;
  
  &:first-child {
    margin-right: $spacing-base;
  }
}
</style>